<template>
    <div class="tab-header">
        <h3>微信昵称</h3>
        <div class="flex-jsb">
            <a-tabs v-model:activeKey="activeKey">
                <a-tab-pane v-for="item in tabList" :key="item.key" :tab="item.tab" />
            </a-tabs>
            <a-range-picker
                v-model:value="date"
                style="width: 400px"
                :disabled-date="disabledDate"
                :locale="locale"
                format="YYYY-MM-DD"
            />
        </div>
    </div>
</template>
<script lang="ts" setup>
import {ref} from "vue";
import dayjs, {Dayjs} from "dayjs";
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";

const tabList = [
    {
        key: "all",
        tab: "全部",
    },
    {
        key: "text",
        tab: "文本",
    },
    {
        key: "image",
        tab: "图片",
    },
    {
        key: "video",
        tab: "视频",
    },
    {
        key: "file",
        tab: "文件",
    },
    {
        key: "xcx",
        tab: "小程序",
    },
];
const date = ref("");
const activeKey = ref(tabList[0].key);

const disabledDate = (current: Dayjs) => {
    return current && current > dayjs().endOf("day");
};
</script>

<style lang="less" scoped>
.tab-header {
    width: 100%;
    padding: 16px 12px 0;
    background-color: #fafafa;
    h3 {
        color: #fff;
        border-radius: 30px;
        font-size: 16px;
        font-weight: 600;
        color: rgba(0, 0, 0, 0.85);
    }
    .flex-jsb {
        width: 100%;

        .ant-tabs {
            width: 100%;
        }
    }
}
</style>
